<template>
    <div>
        <div class="box">
            <div class="content">
                <h3>登录</h3>
               <div> {{ info }}</div>
               <el-form :model="loginForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">

               <el-form-item label="账户" prop="pass">
                 <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
               </el-form-item>

               <el-form-item label="密码" prop="password">
                 <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
               </el-form-item>


               <el-form-item>
                 <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                 <el-button @click="resetForm('ruleForm')">重置</el-button>
               </el-form-item>
</el-form>

            </div>
        </div>
    </div>
</template>

<script>

import { jwtDecode } from 'jwt-decode'; // 注意是 { jwtDecode } 且驼峰命名 3.5以上用对象的形式
import { mapMutations } from 'vuex';// Vuex常用的导入语句。mapMutations 属于辅助函数，其作用是在组件里更便捷地调用 Vuex 的 mutations
 
export default {
    data() {
      var validateUser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账户'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else {
          callback();
        }
      };
      return {
        info:'',
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { validator: validateUser, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      ...mapMutations('loginModule',['setUser']),//调用vuex辅助函数在methods,使用组件下的setuser
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {


            // alert('submit!');
            // console.log('校验通过',this.loginForm);
            let { username,password}=this.loginForm
            this.$api.getlogin({
              username,password
            }).then(res=>{
              console.log('---登录的信息--',res.data);
              //登录成功之后：1、存储登录信息， 2、跳转网页 3、顶部显示登录成功 4、持久化
              //1、
              let obj={
                user:jwtDecode(res.data.data).username,
                token:res.data.data
              }
              this.setUser(obj)
              //2、存储本地
              localStorage.setItem('user',JSON.stringify(obj))
              //3、跳转
              this.$router.push('/home')

              if(res.data.status===200){
                this.$message({
                message: '登录成功',
                type: 'success'
        });
                console.log(jwtDecode(res.data.data));
                //
                this.info=''
              }else{
                //账户密码为错误
                // this.info='您输入的密码是错误的'
                this.$message.error('您输入的密码是错误的');
              }
                           
            })
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
.box{
    display: flex;
    height: 100vh; /* 使用 100vh 确保元素高度占满视口 */
    background: url('~@/assets/金克斯.jpg');
    background-size: cover; /* 使背景图片覆盖整个元素 */
    // background-position: center; /* 让背景图片居中显示 */
    // background-repeat: no-repeat; /* 防止背景图片重复 */
}
.content{
    width: 450px;
    height: 300px;
    margin: 150px auto;
    border-radius: 10px;
    border: 1px solid rgb(118, 213, 245);
}
h3{
    text-align: center;
    font-size: 30px;
    margin: 10px 10px;
}
.demo-ruleForm{
    // margin-right: 20px;
    margin: 20px 10px 0 0;
}
</style>    